<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeHabit - 管理后台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .sidebar {
            width: 250px;
            transition: all 0.3s;
        }
        .main-content {
            margin-left: 250px;
            transition: all 0.3s;
        }
        .sidebar.collapsed {
            width: 60px;
        }
        .main-content.expanded {
            margin-left: 60px;
        }
        .nav-item span {
            transition: all 0.2s;
        }
        .sidebar.collapsed .nav-item span {
            display: none;
        }
        .sidebar.collapsed .logo-text {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div id="loading" class="fixed inset-0 bg-white bg-opacity-80 z-50 flex items-center justify-center">
        <div class="text-center">
            <i class="fas fa-spinner fa-spin text-green-500 text-4xl mb-4"></i>
            <p class="text-gray-600">加载中...</p>
        </div>
    </div>

    <div id="app" class="hidden">
        <!-- 侧边栏 -->
        <div id="sidebar" class="sidebar fixed top-0 left-0 h-full bg-gray-800 text-white shadow-lg z-10">
            <div class="p-4 border-b border-gray-700">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fas fa-seedling text-green-400 text-xl mr-2"></i>
                        <span class="text-lg font-semibold logo-text">BeHabit 管理后台</span>
                    </div>
                    <button id="toggleSidebar" class="text-gray-400 hover:text-white">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
            <nav class="mt-4">
                <a href="#" id="dashboardLink" class="nav-item block py-3 px-4 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors">
                    <i class="fas fa-tachometer-alt w-6"></i>
                    <span class="ml-2">仪表盘</span>
                </a>
                <a href="#" id="usersLink" class="nav-item block py-3 px-4 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors">
                    <i class="fas fa-users w-6"></i>
                    <span class="ml-2">用户管理</span>
                </a>
                <a href="#" id="habitsLink" class="nav-item block py-3 px-4 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors">
                    <i class="fas fa-tasks w-6"></i>
                    <span class="ml-2">习惯管理</span>
                </a>
                <a href="#" id="articlesLink" class="nav-item block py-3 px-4 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors">
                    <i class="fas fa-newspaper w-6"></i>
                    <span class="ml-2">文章管理</span>
                </a>
                <a href="#" id="settingsLink" class="nav-item block py-3 px-4 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors">
                    <i class="fas fa-cog w-6"></i>
                    <span class="ml-2">系统设置</span>
                </a>
                <div class="mt-auto pt-20 px-4 pb-4">
                    <a href="/" class="nav-item block py-2 px-4 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors">
                        <i class="fas fa-home w-6"></i>
                        <span class="ml-2">返回首页</span>
                    </a>
                    <button id="logoutBtn" class="w-full mt-2 nav-item block py-2 px-4 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors text-left">
                        <i class="fas fa-sign-out-alt w-6"></i>
                        <span class="ml-2">退出登录</span>
                    </button>
                </div>
            </nav>
        </div>

        <!-- 主内容区 -->
        <div id="mainContent" class="main-content min-h-screen pb-10">
            <!-- 头部 -->
            <header class="bg-white shadow-sm py-4 px-6">
                <div class="flex justify-between items-center">
                    <h1 class="text-xl font-semibold text-gray-800">管理后台</h1>
                    <div class="flex items-center">
                        <div id="adminInfo" class="flex items-center">
                            <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
                                <span id="adminInitial" class="text-green-600 font-medium"></span>
                            </div>
                            <span id="adminEmail" class="text-sm text-gray-600"></span>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="p-6">
                <!-- 各个页面内容将通过JavaScript动态加载 -->
                <div id="dashboardPage" class="content-area"></div>
                <div id="usersPage" class="content-area hidden"></div>
                <div id="habitsPage" class="content-area hidden"></div>
                <div id="articlesPage" class="content-area hidden"></div>
                <div id="settingsPage" class="content-area hidden"></div>
            </div>
        </div>
    </div>

    <!-- 角色信息 -->
    <div id="roleInfo" class="fixed inset-0 flex items-center justify-center z-50 hidden">
        <div class="bg-white p-8 rounded-lg shadow-md w-96 modal-content">
            <h2 class="text-xl font-bold mb-4">角色信息</h2>
            <div class="mb-6">
                <p class="text-gray-700 mb-2"><span class="font-medium">角色：</span> <span id="roleText" class="px-2 py-1 rounded text-sm"></span></p>
                <p class="text-gray-700"><span class="font-medium">邮箱：</span> <span id="roleEmail"></span></p>
            </div>
            <div class="flex justify-end">
                <button onclick="document.getElementById('roleInfo').classList.add('hidden')" class="bg-blue-500 text-white px-4 py-2 rounded-lg">关闭</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取token
            const token = localStorage.getItem('token');
            
            // 如果没有token，重定向到首页
            if (!token) {
                window.location.href = '/';
            }
            
            // 初始化应用
            initAdminPanel();

            // 添加侧边栏链接点击事件
            document.getElementById('dashboardLink').addEventListener('click', function(e) {
                e.preventDefault();
                loadDashboardTab();
                highlightSidebarLink(this);
            });
            
            document.getElementById('usersLink').addEventListener('click', function(e) {
                e.preventDefault();
                loadUsersTab();
                highlightSidebarLink(this);
            });
            
            document.getElementById('habitsLink').addEventListener('click', function(e) {
                e.preventDefault();
                loadHabitsTab();
                highlightSidebarLink(this);
            });
            
            document.getElementById('articlesLink').addEventListener('click', function(e) {
                e.preventDefault();
                loadArticlesTab();
                highlightSidebarLink(this);
            });
            
            document.getElementById('settingsLink').addEventListener('click', function(e) {
                e.preventDefault();
                loadSettingsTab();
                highlightSidebarLink(this);
            });
            
            // 高亮显示当前选中的侧边栏链接
            function highlightSidebarLink(element) {
                // 移除所有链接的高亮
                document.querySelectorAll('.nav-item').forEach(item => {
                    item.classList.remove('bg-gray-700', 'text-white');
                    item.classList.add('text-gray-300');
                });
                
                // 添加当前链接的高亮
                element.classList.remove('text-gray-300');
                element.classList.add('bg-gray-700', 'text-white');
            }

            // 角色信息弹窗点击外部关闭
            const roleInfoModal = document.getElementById('roleInfo');
            if (roleInfoModal) {
                roleInfoModal.addEventListener('click', function(e) {
                    if (!e.target.closest('.modal-content') && e.target === this) {
                        this.classList.add('hidden');
                    }
                });
            }
            
            // 管理员信息点击事件
            const adminInfo = document.getElementById('adminInfo');
            if (adminInfo) {
                adminInfo.addEventListener('click', function() {
                    const roleModal = document.getElementById('roleInfo');
                    const roleText = document.getElementById('roleText');
                    const roleEmail = document.getElementById('roleEmail');
                    
                    // 获取当前角色信息
                    const email = document.getElementById('adminEmail').textContent;
                    const roleClass = document.getElementById('adminInitial').parentElement.className;
                    
                    let role = '用户';
                    let colorClass = 'bg-gray-100 text-gray-800';
                    
                    if (roleClass.includes('bg-red-100')) {
                        role = '管理员';
                        colorClass = 'bg-red-100 text-red-800';
                    } else if (roleClass.includes('bg-blue-100')) {
                        role = '编辑';
                        colorClass = 'bg-blue-100 text-blue-800';
                    }
                    
                    // 更新并显示角色信息
                    roleText.textContent = role;
                    roleText.className = `px-2 py-1 rounded text-sm ${colorClass}`;
                    roleEmail.textContent = email;
                    roleModal.classList.remove('hidden');
                });
            }
        });
    </script>
    <script src="/js/admin.js"></script>
</body>
</html> 